<template>
  <div class="myaddress">
    <div class="myaddress2" v-if="list.length == 0">
      <img src="../../assets/noAddress.png" alt="" />
    </div>
    <div class="addressList">
      <van-address-list
        v-model="chosenAddressId"
        @select="changeAddress"
        :list="list"
        default-tag-text="默认"
        @add="onAdd"
        @edit="onEdit"
      >
        <!-- <template #item-bottom>
            <button>删除</button>
        </template> -->
      </van-address-list>
    </div>
    <van-action-sheet v-model="editaddress" title="新增/编辑地址">
      <div class="editaddress">
        <van-address-edit
          :area-list="areaList"
          :address-info="addressInfo"
          show-delete
          show-set-default
          :area-columns-placeholder="['请选择', '请选择', '请选择']"
          @save="onSave"
          @delete="delAddress"
        />
        <!-- <div class="delBtn">
          <button @click="delAddress">删除</button>
        </div> -->
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import { Toast } from "vant";
import { areaList } from "@vant/area-data";
export default {
  name: "MyAddress",
  data() {
    return {
      chosenAddressId: 0,
      list: [],
      editaddress: false,
      areaList,
      addressInfo: {},
      lastIndex: null,
      editID: 0,
    };
  },
  created() {
    this.getAddressList();
  },
  methods: {
    getAddressList() {
      this.list = [];
      this.$axios.get("api/address/list").then((d) => {
        // console.log(d);
        let arr = d.data.data;
        for (let i = 0; i < arr.length; i++) {
          let o = {
            id: arr[i].id,
            name: arr[i].real_name,
            tel: arr[i].phone,
            isDefault: arr[i].is_default,
            province: arr[i].province,
            city: arr[i].city,
            district: arr[i].district,
            detail: arr[i].detail,
            address: `${arr[i].province}${arr[i].city}${arr[i].district}${arr[i].detail}`,
          };
          this.list.push(o);
        }
        // console.log("所有的列表==>", this.list);
      });
    },
    onSave(content) {
      // console.log("新增保存时的数据==>", content);
      let addressList = {
        city: content.city,
        province: content.province,
        district: content.county,
        city_id: 0,
        // areaCode: content.areaCode
        areaCode: "130303",
      };
      content.isDefault = content.isDefault == false ? 0 : 1;
      let editID = this.editId == 0 ? "" : this.editId;
      this.$axios
        .post("api/address/edit", {
          address: addressList,
          detail: content.addressDetail,
          phone: content.tel,
          real_name: content.name,
          is_default: content.isDefault,
          post_code: content.areaCode,
          id: editID,
        })
        .then((d) => {
          // console.log("onSave==>", d);
          if (d.data.status == 200) {
            Toast("保存成功");
            this.getAddressList();
            this.editId = 0;
            setTimeout(() => {
              this.editaddress = false;
            }, 1000);
          } else {
            Toast(d.data.msg);
            this.editId = 0;
          }
        });
    },
    changeAddress(item, index) {
      //   console.log("选中的checkbox==>",item);
      // console.log(index);
      // console.log(this.lastIndex)
      if (index == this.lastIndex) {
        this.chosenAddressId = 0;
      }
      this.lastIndex = index;
    },
    onAdd() {
      // Toast("新增地址");
      // this.$router.push("/editaddress");
      this.editId = 0;
      this.editaddress = true;
      this.addressInfo = {};
    },
    onEdit(item) {
      // console.log("显示前==>", item);
      this.editaddress = true;
      item.isDefault = item.isDefault == 0 ? false : true;
      let areaCode = null;
      for (const index in areaList.county_list) {
        const element = areaList.county_list[index];
        if (element == item.district) {
          areaCode = index;
          break;
        }
      }
      this.addressInfo = {
        addressDetail: item.detail,
        city: item.city,
        county: item.district,
        id: item.id,
        isDefault: item.isDefault,
        name: item.name,
        province: item.province,
        tel: item.tel,
        areaCode: areaCode,
      };
      // console.log("转addressInfo后==>", this.addressInfo);
      this.editId = item.id;
      // Toast("编辑地址:" + index);
    },
    delAddress(content) {
      console.log(content);
      this.$axios
        .post("api/address/del", {
          id: content.id,
        })
        .then((d) => {
          if (d.data.status == 200) {
            Toast("删除成功");
            this.getAddressList();
            setTimeout(() => {
              this.editaddress = false;
            }, 1000);
          }
        });
    },
  },
};
</script>

<style lang="less">
.myaddress {
  padding-bottom: 5rem;
  .myaddress2 {
    text-align: center;
    padding: 5rem 0rem;
  }
  .myaddress2 img {
    height: 12rem;
  }
  .van-address-list__bottom {
    z-index: 1000;
    position: static;
  }
  .van-button--danger {
    background-color: #e93323;
    border: 1px solid #e93323;
  }
  .delBtn {
    padding: 0 26px;
    button {
      width: 100%;
      height: 38px;
      border-radius: 20px;
      border: none;
      font-size: 15px;
    }
  }
  .van-address-list {
    padding: 12px 12px 5px;
  }
  .van-radio-group {
    margin-bottom: 30px;
  }
  .van-address-edit__buttons {
    padding: 32px 4px 0px;
  }
  .van-address-edit {
    padding: 12px 0px 0px;
  }
  .van-radio__icon {
    display: none;
  }
}
</style>